<template>
  <view class="root">
    <view class="content">
      <uni-forms ref="form" :model="form" :rules="rules" validateTrigger="blur" :border="true" err-show-type="toast"
        label-width="95" v-if="!isEmpty">
        <uni-forms-item label="开业时间" name="openingTime" required>
          <view class="form-content-item">
            <uni-datetime-picker type="date" :border="false" v-model="form.openingTime" @change="onTimeChange"
              return-type="timestamp">
              <view :class="{'time-selected': form.openingTime ? true: false}" class="time-default">
                {{ form.openingTime ? moment(form.openingTime).format('YYYY-MM-DD') : '请选择'  }}
              </view>
            </uni-datetime-picker>
            <uni-icons type="right" size="21" color="#C2C0C0"></uni-icons>
          </view>
        </uni-forms-item>
        <uni-forms-item label="营业面积（㎡）" name="businessArea" required>
          <view class="form-content-item" :class="form.businessArea ?  '' : 'input-item'">
            <uni-easyinput type="text" v-model="form.businessArea" disableColor="#ffffff" :inputBorder="false"
              placeholder="请输入营业面积" :clearable="true" style="padding-right: 21px;" />
          </view>
        </uni-forms-item>
        <uni-forms-item label="房屋结构" name="houseStructure" required>
          <view class="form-content-item" @click="hadleShowPicker('house_structure_type', 'houseStructure')">
            <uni-easyinput type="text" v-model="form.houseStructure_text" disabled disableColor="#ffffff"
              :inputBorder="false" placeholder="请选择" :clearable="true" />
            <uni-icons type="right" size="21" color="#C2C0C0"></uni-icons>
          </view>
        </uni-forms-item>
        <uni-forms-item label="房屋性质" name="houseNature" required>
          <view class="form-content-item" @click="hadleShowPicker('house_nature', 'houseNature')">
            <uni-easyinput type="text" v-model="form.houseNature_text" disabled disableColor="#ffffff"
              :inputBorder="false" placeholder="请选择" :clearable="true" />
            <uni-icons type="right" size="21" color="#C2C0C0"></uni-icons>
          </view>
        </uni-forms-item>
        <uni-forms-item label="房屋所有权" name="houseOwnership" required>
          <view class="form-content-item" @click="hadleShowPicker('house_ownership_type', 'houseOwnership')">
            <uni-easyinput type="text" v-model="form.houseOwnership_text" disabled disableColor="#ffffff"
              :inputBorder="false" placeholder="请选择" :clearable="true" />
            <uni-icons type="right" size="21" color="#C2C0C0"></uni-icons>
          </view>
        </uni-forms-item>
        <uni-forms-item label="营业建筑是否在1998年9月1日之前竣工建筑且此后未改建(含装修、用途变更)" name="onRebuild" required>
          <view class="form-content-item" @click="hadleShowPicker('flag_type', 'onRebuild')">
            <uni-easyinput type="text" v-model="form.onRebuild_text" disabled disableColor="#ffffff"
              :inputBorder="false" placeholder="请选择" :clearable="true" />
            <uni-icons type="right" size="21" color="#C2C0C0"></uni-icons>
          </view>
        </uni-forms-item>
        <uni-forms-item label="是否依法通过消防验收" name="onFireAcceptance" required>
          <view class="form-content-item" @click="hadleShowPicker('flag_type', 'onFireAcceptance')">
            <uni-easyinput type="text" v-model="form.onFireAcceptance_text" disabled disableColor="#ffffff"
              :inputBorder="false" placeholder="请选择" :clearable="true" />
            <uni-icons type="right" size="21" color="#C2C0C0"></uni-icons>
          </view>
        </uni-forms-item>
        <uni-forms-item label="是否依法进行竣工验收消防备案" name="onFireFiling" required style="background: red;">
          <view class="form-content-item" @click="hadleShowPicker('flag_type', 'onFireFiling')">
            <uni-easyinput type="text" v-model="form.onFireFiling_text" disabled disableColor="#ffffff"
              :inputBorder="false" placeholder="请选择" :clearable="true" />
            <uni-icons type="right" size="21" color="#C2C0C0"></uni-icons>
          </view>
        </uni-forms-item>
        <uni-forms-item label="是否为公众聚集场所" name="onGatheringPlace" required>
          <view class="form-content-item" @click="hadleShowPicker('flag_type', 'onGatheringPlace')">
            <uni-easyinput type="text" v-model="form.onGatheringPlace_text" disabled disableColor="#ffffff"
              :inputBorder="false" placeholder="请选择" :clearable="true" />
            <uni-icons type="right" size="21" color="#C2C0C0"></uni-icons>
          </view>
        </uni-forms-item>
        <uni-forms-item label="依法通过投入使用、营业前消防安全检查" name="onSecurityCheck" required>
          <view class="form-content-item" @click="hadleShowPicker('flag_type', 'onSecurityCheck')">
            <uni-easyinput type="text" v-model="form.onSecurityCheck_text" disabled disableColor="#ffffff"
              :inputBorder="false" placeholder="请选择" :clearable="true" />
            <uni-icons type="right" size="21" color="#C2C0C0"></uni-icons>
          </view>
        </uni-forms-item>
      </uni-forms>
    </view>
    <u-empty v-if="isEmpty" mode="list" text="您还没有完善场所信息！" :icon="baseImgUrl + 'no-icon4.png'">
    </u-empty>

    <view class="button-wrapper">
      <button v-if="isEmpty" class="btn-add" type="primary" icon="map" style="width: 100%" @click="isEmpty = false">
        添加营业场所信息
      </button>
      <template v-else>
        <view class="cancel btn-item" @click="handleCancel">取消</view>
        <view class="submit btn-item" @click="handleSubmit">保存</view>
      </template>
    </view>

    <u-picker closeOnClickOverlay v-if="pickerShow" :show="pickerShow" :columns="pickerData" keyName="text"
      @confirm="onPickerConfirm" @cancel="pickerShow = false" @close="pickerShow = false"
      :defaultIndex="defaultIndex"></u-picker>
  </view>
</template>


<script>
  import {
    findCompany,
    infoDetailSave
  } from '@/api/home'
  import moment from '@/utils/moment'
  import pickerMixin from '@/utils/picker-mixin'
  import {
    Toast,
    navBack
  } from '@/utils/util'

  import _ from '@/utils/lodash.js'


  export default {
    mixins: [pickerMixin],
    data() {
      return {
        form: this.initForm(),
        baseImgUrl: this.$baseImgUrl,
        rules: {
          openingTime: {
            rules: [{
              required: true,
              errorMessage: '请选择开业时间！',
            }]
          },
          businessArea: {
            rules: [{
                required: true,
                errorMessage: '请输入营业面积！',
              },
              {
                pattern: '^(\\d+\\.?)?\\d{0,2}$',
                errorMessage: '营业面积请输入数字,可精确到小数点后两位！'
              }
            ]
          },
          houseStructure: {
            rules: [{
              required: true,
              errorMessage: '请选择房屋结构！',
            }]
          },
          houseNature: {
            rules: [{
              required: true,
              errorMessage: '请选择房屋性质！',
            }]
          },
          houseOwnership: {
            rules: [{
              required: true,
              errorMessage: '请选择房屋所有权！',
            }]
          },
          onRebuild: {
            rules: [{
              required: true,
              errorMessage: '请选择是否在1998年9月1日之前竣工！',
            }]
          },
          onFireAcceptance: {
            rules: [{
              required: true,
              errorMessage: '请选择是否依法通过消防验收！',
            }]
          },
          onFireFiling: {
            rules: [{
              required: true,
              errorMessage: '请选择是否依法进行竣工验收消防备案！',
            }]
          },
          onGatheringPlace: {
            rules: [{
              required: true,
              errorMessage: '请选择是否为公众聚集场所！',
            }]
          },
          onSecurityCheck: {
            rules: [{
              required: true,
              errorMessage: '请选择依法通过投入使用、营业前消防安全检查！',
            }]
          },
        },
        options: {},
        formDictMap: [
          'businessArea',
          'houseStructure',
          'houseNature',
          'houseOwnership',
          'onRebuild',
          'onFireAcceptance',
          'onFireFiling',
          'onGatheringPlace',
          'onSecurityCheck'
        ],
        isEmpty: false
      }
    },
    // 定义 actionType 'add' 'modify'  
    // 其他参数放在 params 里面
    onLoad(options) {
      this.options = options
      this.getInfo()
    },
    methods: {
      moment,
      initForm() {
        return {
          openingTime: '',
          businessArea: '',
          houseStructure: '',
          houseNature: '',
          houseOwnership: '',
          onRebuild: '',
          onFireAcceptance: '',
          onFireFiling: '',
          onGatheringPlace: '',
          onSecurityCheck: ''
        }
      },
      onTimeChange(e) {
        this.form.openingTime = e
      },
      handleSubmit() {
        this.$refs.form.validate().then((res) => {
          // 成功返回，res 为表单数据
          let data = {
            companyId: this.options.companyMessageId,
            ...this.form
          };
          infoDetailSave(data).then((res) => {
            Toast("保存成功");
            navBack();
          });
        }).catch((err) => {
          // 表单校验验失败，err 为具体错误信息
        })
      },
      handleCancel() {
        navBack()
      },
      getInfo() {
        findCompany({
          companyId: this.options.companyMessageId,
        }).then((res) => {
          this.isEmpty = Object.keys(res.result).length ? false : true
          // 取出字典里面的值
          let form = _.pick(res.result, Object.keys(this.initForm()));
          Object.assign(this.form, form)
          this.formDictMap.forEach(key => {
            this.$set(this.form, `${key}_text`, res.result[`${key}Name`])
          })
        })
      }
    }
  }
</script>

<style>
  page {
    background: #F9F9F9;
    padding: 16rpx;
    box-sizing: border-box;
  }
</style>

<style lang="scss" scoped>
  @import "../../styles/uni-form.scss";
  @import "../../styles/submit-button.scss";

  .root {
    border-radius: 16rpx 16rpx 16rpx 16rpx;

    .content {
      background: #FFFFFF;
    }

    /deep/ .uni-forms-item:nth-of-type(6) {

      .uni-forms-item__label {
        width: 78% !important;
      }

      .uni-forms-item__content {
        width: 20% !important;
      }
    }

    /deep/.uni-forms {
      margin-bottom: 130rpx;
    }
  }
</style>